<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body><!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>系统人员</title>
    <script th:src="@{/layui/layui.js}" type="text/javascript"></script>
    <link th:href="@{/layui/css/layui.css}" rel="stylesheet" />
    <style>
        .layui-upload-img{
            border: 1px solid #1E9FFF;
            width: 200px;
            height: 200px;
            border-radius: 200px;;
        }
    </style>
</head>
<body>

<div style="margin: 20px" >
    <form class="layui-form layui-form-pane">
        <input type="hidden" id="areaAddress" name="areaAddress"/>

        <div class="layui-form-item">
            <label class="layui-form-label">用户id</label>
            <div class="layui-input-block" style="width: 180px;">
                <input class="layui-input" name="userId" autocomplete="off">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">收货人名称</label>
            <div class="layui-input-block" style="width: 180px;">
                <input  class="layui-input" name="receiver" autocomplete="off"/>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">用户手机</label>
            <div class="layui-input-block" style="width: 180px;">
                <input type="text" class="layui-input" name="phone" autocomplete="off" />
            </div>

        </div>

        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">区域地址</label>
                <div class="layui-input-inline" style="min-width:150px;">
                    <select  id="province"  lay-filter="province"  lay-verify="required">

                    </select>
                </div>
                <div class="layui-form-mid">-</div>
                <div class="layui-input-inline" style="min-width:120px;">
                    <select class="layui-select"  id="city" lay-filter="city" lay-verify="required">

                    </select>
                </div>
                <div class="layui-form-mid">-</div>
                <div class="layui-input-inline" style="min-width:120px;">
                    <select class="layui-select"  id="area" lay-filter="area" lay-verify="required">

                    </select>

                </div>

            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">详细地址</label>
            <div class="layui-input-block" style="width: 225px;">
                <input type="text" class="layui-input" name="address" autocomplete="off" />
            </div>

        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">默认</label>
            <div class="layui-input-block" style="width: 225px;">
                <select type="text" class="layui-select"  name="status"  autocomplete="off">
                    <option value="">请选择</option>
                    <option value="1">是</option>
                    <option value="2">否</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item" style="display: none">
            <div class="layui-input-block">
                <a class="layui-btn" lay-submit="" lay-filter="submitBtn" id="submitBtn"></a>
            </div>
        </div>
    </form>
</div>
<script>
    var $,form,str='';
    layui.use(['form','jquery','upload','element','layer'],function () {
        var upload = layui.upload,
            layer = layui.layer,
            elem = layui.element;
        $ = layui.jquery,form = layui.form;

        findRegion(1,'province','省份',0);


        //下拉框监听
        form.on('select(province)',function (data){
            if(data.value==''){
                $('#city').empty();
                $('#area').empty();
            }else{
                findRegion(2,'city','市',data.value);
            }
            str=data.elem[data.elem.selectedIndex].text;
        })
        form.on('select(city)',function (data){
            if(data.value==''){
                $('#area').empty();
            }else{
                findRegion(3,'area','区/县',data.value);
            }
            str+=data.elem[data.elem.selectedIndex].text;
        })

        form.on('select(area)',function (data){

            str+=data.elem[data.elem.selectedIndex].text;
        })
        form.on('submit(submitBtn)',function (data) {
            var formData = data.field;
            formData.areaAddress=str;

            $.ajax({
                type:'post',
                url:'/address/ra/add',
                data:formData,
                dataType:'json',
                success:function (result) {
                    layer.msg(result.msg);
                    if(result.is){
                        let index = parent.layer.getFrameIndex(window.name);
                        parent.layer.close(index);//关闭父页面窗口
                    }
                }
            })
        })

    })
    function findRegion(type,name,tip,pid){
        $.ajax({
            type:'post',
            url:'/system/rc/find',
            data:{
                pid:pid,
                type:type,
                limit:100
            },
            dataType:'json',
            success:function (res) {
                var obj = $('#'+name);
                //清除里面内容
                $(obj).empty().append('<option value="">请选择'+tip+'</option>');
                $.each(res.data,function(i,data){
                    var option = '<option value="'+data.id+'">'+data.name+'</option>';
                    $(obj).append(option);
                })
                form.render('select');//指定表单刷新
            }
        })
    }
    function btnSubmit() {
        $('#submitBtn').click();
    }

</script>

</body>
</html>

</body>
</html>